@import '../../../../../lessConst.less';

.wishModal {
  background-color: #191919;
  .at-action-sheet__container {
    height: 1200px;
    background: url('https://ruizhi-ipland.oss-cn-nanjing.aliyuncs.com/catchPlaything/wishModalBj.jpg') no-repeat;
    background-size: 100% 100%;
    background-color: transparent !important;
    border-radius: 30px;
  }

  .wishTitle {
    color: #fff;
    padding-top: 5px;
  }

  .loadingContent {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1100px;
  }

  .emptyContent {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;

    .emptyIcon {
      width: 370px;
      height: 240px;
    }
    .emptyExtraTitle {
      color: #fff;
      margin-top: 10px;
      font-size: 24px;
    }
  }

  .modalClose {
    position: absolute;
    right: 15px;
    top: 16px;
    .closeIcon {
      width: 68px;
      height: 68px;
    }
  }

  .selector {
    background: url('@{iplandUrl}catchPlaything/wishSelector.png') no-repeat;
    background-size: 100% 100%;
    width: 768px;
    height: 470px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    .selectName {
      color: #fff;
      width: 80%;
      font-size: 30px;
    }

    .gift {
      width: 182px;
      height: 308px;
    }
  }

  .product {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;

    .list {
      white-space: nowrap;
      width: 100%;

      .content {
        flex-direction: row;
        padding: 10px 0;
        width: 100%;
        height: 400px;

        .productItem {
          height: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 0 5px 5px 0;
          width: calc((100% - 10px) / 3); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
          min-width: calc((100% - 10px) / 3); // 加入min-width、max-width后每个child的宽度就生效了
          max-width: calc((100% - 10px) / 3);
          padding: 0 20px;
          .item {
            width: 100%;
            background: url('@{iplandUrl}catchPlaything/wishBj.png') no-repeat;
            background-size: 100% 100%;
            height: 240px;
            display: flex;
            justify-content: center;
            align-items: center;

            .thum {
              width: 94px;
              height: 156px;
            }

            .name {
              color: #fff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              display: block;
              width: 100%;
              font-size: 24px;
            }

            .singlePrice {
              color: #8074e4;
              font-size: 22px;
            }
          }
        }

        .productItem:nth-child(3n) {
          margin-right: 0; // 去除第3n个的margin-right
        }
      }
    }
  }

  .operates {
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;

    .wishButton {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #8074e4;
      border-radius: 48px;
      color: #fff;
      width: 248px;
      height: 88px;
    }
    .wishButton::after {
      border: 0;
    }
  }
}
